<?php 
		$upload_dir = "person_photo"; 				// The directory for the images to be saved in
		$upload_path = $upload_dir."/";				// The path to where the image will be saved
		$upload_path_large=$upload_path."large_photo/";
		$large_image_prefix = "template"; 			// The prefix name to large image 临时大图
		$thumb_image_prefix = "portrait";			// The prefix name to the thumb image小图
		$large_image_name = $large_image_prefix;     // New name of the large image (append the timestamp to the filename)
		$thumb_image_name = $thumb_image_prefix;     // New name of the thumbnail image (append the timestamp to the filename)
		$max_file = "3"; 							// Maximum file size in MB
		$max_width = "300";							// Max width allowed for the large image
		$thumb_width = "75";						// Width of thumbnail image
		$thumb_height = "75";						// Height of thumbnail image
		// Only one of these image types should be allowed for upload
		$allowed_image_types = array('image/pjpeg'=>"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
		$allowed_image_ext = array_unique($allowed_image_types); // do not change this
		if(isset($user_file_ext))
		{
			$large_image_location = $upload_path_large.$large_image_name . "_" . $this->session->userdata('user_id') . $user_file_ext;
			$thumb_image_location = $upload_path.$thumb_image_name. "_" . $this->session->userdata('user_id') . $user_file_ext;
		}
?>
	<?php if(empty($op)){?>
	<form name="photo" enctype="multipart/form-data" action="?op=upload&t=<?php echo time();?>" method="post">Photo 
		<input type="file" name="image" size="30" /> 
		<input type="submit" name="upload" value="上传" />
	</form>
	<?php }?>

	<?php if($op=='upload'){?>
		<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="<?php echo base_url();?>js/jquery.imgareaselect-0.6.2.js"></script>
		<script type="text/javascript">
		function preview(img, selection) 
		{ 
			var scaleX = <?php echo $thumb_width;?> / selection.width; 
			var scaleY = <?php echo $thumb_height;?> / selection.height; 
	
			$('#thumbnail + div > img').css({ 
				width: Math.round(scaleX * <?php echo getWidth($large_image_location);?>) + 'px', 
				height: Math.round(scaleY * <?php echo getHeight($large_image_location);?>) + 'px',
				marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
				marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
			});
			$('#x1').val(selection.x1);
			$('#y1').val(selection.y1);
			$('#x2').val(selection.x2);
			$('#y2').val(selection.y2);
			$('#w').val(selection.width);
			$('#h').val(selection.height);
		} 

		$(document).ready(function () { 
			$('#save_thumb').click(function() {
				var x1 = $('#x1').val();
				var y1 = $('#y1').val();
				var x2 = $('#x2').val();
				var y2 = $('#y2').val();
				var w = $('#w').val();
				var h = $('#h').val();
				if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
					alert("You must make a selection first");
					return false;
				}else{
					return true;
				}
			});
			$('<div><img src="<?php echo base_url() . $large_image_location;?>?t=<?php echo time();?>" style="position: relative;" /></div>')
   		 .css({
   		   float: 'left',
    		  position: 'relative',
    		  overflow: 'hidden',
    		  width: '<?php echo $thumb_width;?>px',
    		  height: '<?php echo $thumb_height;?>px'
  		  })
   		 .insertAfter($('#thumbnail'));
			
			$('#thumbnail').imgAreaSelect({x1:0, y1: 0, x2: <?php echo $thumb_width;?>, y2: <?php echo $thumb_height;?>,selectionOpacity: 0.2 ,aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>',onSelectChange: preview,persistent:true });
			$('#x1').val(0);
			$('#y1').val(0);
			$('#x2').val(<?php echo $thumb_width;?>);
			$('#y2').val(<?php echo $thumb_height;?>);
			$('#w').val(<?php echo $thumb_width;?>);
			$('#h').val(<?php echo $thumb_height;?>); 
			//
		}); 
		</script>
		
		<div class="container1">
			<p><img id="thumbnail" src="<?php echo base_url() . $large_image_location;?>?t=<?php echo time();?>" title="thumbnail" style="float: left; margin-right: 10px;" /></p>
		</div>
		<form name="thumbnail" action="?op=thumbnail&t=<?php echo time();?>&user_file_ext=<?php echo $user_file_ext;?>" method="post">
			<input type="hidden" name="x1" value="" id="x1" /> 
			<input type="hidden" name="y1" value="" id="y1" /> 
			<input type="hidden" name="x2" value="" id="x2" />
			<input type="hidden" name="y2" value="" id="y2" /> 
			<input type="hidden" name="w" value="" id="w" />
			<input type="hidden" name="h" value="" id="h" /> 
			<input type="submit" name="upload_thumbnail" value="生成头像" id="save_thumb" />
		</form>

		<hr />

	<?php }?>
	<?php if($op=='thumbnail'){?>

		<img src="<?php echo base_url() . $thumb_image_location;?>" alt="" />
	<?php }?>
		
		</div>
	</div>
</div>